<#escape x as x?html>
<ul class="users-list clearfix common">
    <#if (apps??)&&(apps?size>0)>
        <#list apps as app>
            <li id="${app.id!''}_common_md" appId="${app.id!''}" class="sumary hidden-lg-fusion"
                style="width:30%;height: 200px;background-color: #eeeeee;border: 1px solid #c2c2c2;border-radius: 5px;<#if ((app_index+1)%3)!=1>margin-left: 2.5%;</#if><#if ((app_index+1)%3)!=0>margin-right: 2.5%;</#if>margin-top: 15px;margin-bottom: 15px;">
                <img src="/resource/app/${app.pic!''}" alt="User Image"
                     style="border-radius: 0;margin-top: 5px;">
                <a class="users-list-name" style="margin: 10px;font-size: 16px;">${app.name!''}</a>
                <span class="users-list-date"
                      style="margin: 5px;font-size: 12px;">${app.category!''}</span>
                <span class="users-list-date" style="margin: 5px;font-size: 12px;"><i
                        class="fa fa-rss text-primary"
                        reset
                        title="订阅"></i>&nbsp;${app.subscribeCount!''}次订阅</span>
                <span class="users-list-date"
                      style="margin: 5px;font-size: 12px;">${app.publishTime!''}
                    发布</span>
            </li>
            <li id="${app.id!''}_common_md_detail" class="hidden-lg-fusion" appId="${app.id!''}"
                style="display: none;width:30%;height: 200px;background-color: #466eb7;border: 1px solid #c2c2c2;border-radius: 5px;<#if ((app_index+1)%3)!=1>margin-left: 2.5%;</#if><#if ((app_index+1)%3)!=0>margin-right: 2.5%;</#if>margin-top: 15px;margin-bottom: 15px;">
                <a class="users-list-name" style="font-size: 16px;color: white;">${app.name!''}</a>
                <hr style="width:90%;border-top: 2px solid;margin-bottom:10px;margin-top:10px;color: #264f99"/>
                <span class="users-list-date"
                      style="text-overflow: ellipsis;height: 85px;overflow: hidden;text-align: left;color: white;font-size: 12px;width: 90%;margin-left: 5%;">${app.desc!''}</span>
                <span class="info-box-text" style="margin-top: 5px;">
                             <input class="rating-input-middle" value="${app.star!''}" type="number">
                             </span>
            </li>
            <li id="${app.id!''}_common_lg" appId="${app.id!''}" class="sumary hidden-md-fusion"
                style="width:22%;height: 250px;background-color: #eeeeee;border: 1px solid #c2c2c2;border-radius: 5px;<#if ((app_index+1)%4)!=1>margin-left: 2%;</#if><#if ((app_index+1)%4)!=0>margin-right: 2%;</#if>margin-top: 15px;margin-bottom: 15px;">
                <img src="/resource/app/${app.pic!''}" alt="User Image"
                     style="border-radius: 0;margin-top: 20px;">
                <a class="users-list-name" style="margin: 10px;font-size: 18px;">${app.name!''}</a>
                <span class="users-list-date"
                      style="margin: 5px;font-size: 14px;">${app.category!''}</span>
                <span class="users-list-date" style="margin: 5px;font-size: 14px;"><i
                        class="fa fa-rss text-primary"
                        reset
                        title="订阅"></i>&nbsp;${app.subscribeCount!''}次订阅</span>
                <span class="users-list-date"
                      style="margin: 5px;font-size: 14px;">${app.publishTime!''}
                    发布</span>
            </li>
            <li id="${app.id!''}_common_lg_detail" class="hidden-md-fusion" appId="${app.id!''}"
                style="display: none;width:22%;height: 250px;background-color: #466eb7;border: 1px solid #c2c2c2;border-radius: 5px;<#if ((app_index+1)%4)!=1>margin-left: 2%;</#if><#if ((app_index+1)%4)!=0>margin-right: 2%;</#if>margin-top: 15px;margin-bottom: 15px;">
                <a class="users-list-name" style="font-size: 18px;color: white;">${app.name!''}</a>
                <hr style="width:90%;border-top: 2px solid;color: #264f99"/>
                <span class="users-list-date"
                      style="text-overflow: ellipsis;height: 100px;overflow: hidden;text-align: left;color: white;font-size: 14px;width: 90%;margin-left: 5%;">${app.desc!''}</span>
                <span class="info-box-text" style="margin-top: 10px;">
                             <input class="rating-input-middle" value="${app.star!''}" type="number">
                             </span>
            </li>
        </#list>
    </#if>
</ul>
<script>
    context.call([
        "core",
        "list",
        "jQuery",
        "carousel",
        "starRating"
    ], function (core, list, jQuery, carousel, starRating) {
        $('.rating-input-middle').rating({
            min: 0,
            max: 5,
            step: 1,
            size: 'xs',
            // showClear:false
            displayOnly: true
        });

        $('a').hover(function () {
            $(this).css("cursor", "pointer");
        });

        $('ul.users-list li').click(function () {
            location.href = "/app/detail?id=" + $(this).attr("appId");
        });

        $('.info-box').hover(function () {
            $(this).css("background-color", "#c2c2c2");
            $(this).css("cursor", "pointer");
        }, function () {
            $(this).css("background-color", "transparent");
        });

        $('.users-list.hot').find('li').each(function () {
            $(this).hover(function () {
                $(this).css("background-color", "#eeeeee");
                $(this).css("cursor", "pointer");
            }, function () {
                $(this).css("background-color", "transparent");
            });
        });

        $('.users-list.common').find('li').each(function () {
            $(this).hover(function () {
                var id = $(this).attr("id");
                $(this).css("cursor", "pointer");
                if ("sumary hidden-md-fusion" == $(this).attr("class") || "sumary hidden-lg-fusion" == $(this).attr("class")) {
                    $("#" + id).css("display", "none");
                    $("#" + id + "_detail").css("display", "block");
                }
            }, function () {
                var _id = $(this).attr("id");
                $(this).css("cursor", "pointer");
                if (_id.endWith("_detail")) {
                    var id = _id.substring(0, _id.length - 7);
                    $("#" + id + "_detail").css("display", "none");
                    $("#" + id).css("display", "block");
                }
            });
        });
    });
</script>
</#escape>